<template>
  <div class="contend coachPageContend">
    <div class="container">
      <div class="topTitleTab">
        <span>当前位置：首页 > 教练</span>
      </div>
      <div class="contendBox">
        <div class="left">
          <div class="formBox">
            <formSearch
              :filteroptions="filterOptions.filter"
              :sortTypeList="filterOptions.order"
              @search="fliterSearch"
            ></formSearch>
          </div>
          <div class="listBox">
            <coachItem
              v-if="coachList.length > 0"
              v-for="(coachitem, i) in coachList"
              :coachitem="coachitem"
              :key="i"
            ></coachItem>
            <el-pagination
              v-if="coachList.length > 0"
              @size-change="handleSizeChange"
              :current-page.sync="page"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20]"
              :page-size="10"
              background
              layout="total, sizes, prev, pager, next"
              :total="pagination.total"
            >
            </el-pagination>
            <div class="nodataBox" v-if="coachList.length == 0">
              <img src="~/assets/images/nodata.png" alt="" />
              <span class="tips">暂无数据</span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="cardBox" v-if="schoolListQw.length > 0">
            <div class="title">
              <span>推荐驾校 </span>
            </div>
            <div class="cardContend">
              <div
                class="authority"
                v-for="(authority, i) in schoolListQw"
                :key="i"
              >
                <div class="authorityleft">
                  <span :class="i > 2 ? 'soltNum soltNumnor' : 'soltNum'">{{
                    i + 1
                  }}</span>
                  <nuxt-link
                    :to="{
                      name: 'school-schoolDetails-id',
                      query: { schoolId: authority.id },
                    }"
                  >
                    <span v-if="i != 0" class="curp">{{
                      authority.short_title
                    }}</span>
                  </nuxt-link>
                </div>
                <span class="people" v-if="i != 0"
                  >{{ authority.sCount }}人</span
                >
                <div class="right" v-if="i == 0">
                  <img :src="authority.head_img" alt="" class="schoolImg" />
                  <div class="content firstContent">
                    <nuxt-link
                      :to="{
                        name: 'school-schoolDetails-id',
                        query: { schoolId: authority.id },
                      }"
                    >
                      <span class="contenttitle curp">{{
                        authority.short_title
                      }}</span>
                    </nuxt-link>
                    <div class="starBox">
                      <img
                        src="~/assets/images/rankstar.png"
                        alt=""
                        v-for="num in authority.cAvg"
                        :key="num"
                      />
                      <img
                        v-if="authority.cAvg < 5"
                        src="~/assets/images/rankstarhui.png"
                        alt=""
                        v-for="num in 5 - authority.cAvg"
                        :key="num"
                      />
                    </div>
                    <span class="tips">{{ authority.address }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cardBox" v-if="sortCoachList.length > 0">
            <div class="title">口碑教练排行榜</div>
            <div class="card">
              <sortCoach
                v-for="(item, i) in sortCoachList"
                :key="i"
                :coachItem="item"
                :sortNum="i"
              ></sortCoach>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { coach, cityfilter, school } from "~/api/commen";
import formSearch from "@/components/formSearch.vue";
import sortCoach from "@/components/sortCoach.vue";
import coachItem from "@/components/coachItem.vue";
export default {
  components: {
    formSearch,
    sortCoach,
    coachItem,
  },
  data() {
    return {
      cityList: [],
      quyuList: [{ title: "不限", id: null }],
      page: 1,
      rows: 10,
    };
  },

  async asyncData({ app, query, params }) {
    let [coachList, schoolListQw] = await Promise.all([
      await coach({ page: 1, rows: 10 }),
      await school({ page: 1, rows: 5 }),
    ]);

    return {
      sortCoachList: coachList.list.slice(0, 5),
      pagination: coachList.page,
      coachList: coachList.list,
      schoolListQw: schoolListQw.list,
      filterOptions: coachList.filterOption,
    };
  },

  methods: {
    handleSizeChange(val) {
      this.rows = val;
      this.getschool();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getschool();
    },
    //驾校
    async getcoach(formSearch) {
      let params = { page: this.page, rows: this.rows };
      if (formSearch) {
        params = Object.assign(params, formSearch);
      }
      let data = await coach(params);
      this.coachList = data.list;
      this.pagination = data.page;
    },
    fliterSearch(formSearch) {
      this.getcoach(formSearch);
    },
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/coachPage.scss";
::v-deep {
  .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>